<template>
	<view class="container">
		
		<view class="title">
			
			<view class="tag" v-if="detail.select">
				<uni-tag text="置顶" 
				type="error"
				:inverted="true"
				size="normal"
				>	
				</uni-tag>
			</view>
			
			<view class="text">{{detail.title}}</view>
		</view>
		
		<view class="info">
			<view class="item">{{detail.author}}</view>
			<view class="item">
				{{timeAgo(detail.publish_date)}}
			</view>
		</view>
		
		<view class="content">
			<!-- <rich-text :nodes="detail.content"></rich-text> -->
			<!-- 此插件较uniapp官方的内置富文本组件功能更强 -->
			<mp-html :content="detail.content"></mp-html>
		</view>
		
		<view class="count">
			阅读量：{{detail.view_count}}
		</view>
		
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { apiGetNoticeDetail } from '@/api/apis';
import { onLoad } from '@dcloudio/uni-app';
import {timeAgo} from '@/utils/date.js'
	const detail = ref({publish_date: 0})
	onLoad((params) => {
		const {id} = params
		getNoticeDetail(id)
	})
	
	const getNoticeDetail = async (id) => {
		const data = await apiGetNoticeDetail({id})
		detail.value = data.data
	}
	
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	.title {
		display: flex;
		font-size: 40rpx;
		line-height: 1.6em;
		padding-bottom: 30rpx;
		.tag {
			/* 将元素缩放到原始大小的80% */
			transform: scale(0.8);
			
			/* 设置变换的原点为元素的左侧中心位置 */
			transform-origin: left center;
			
			/* 防止元素在容器空间不足时缩小，保持原始尺寸 */
			flex-shrink: 0;
		}
		.text {
			padding-left: 6rpx;
		}
	}
	.info {
		display: flex;
		align-items: center;
		color: $text-font-color-3;
		.item {
			padding-right: 20rpx;
		}
	}
	.content {
		padding: 50rpx 0;
	}
	.count {
		color: #999;
		font-size: 28rpx;
	}
}
</style>
